<template>
  <div class="user-avatar">
    <img class="user-avatar--img" :src="avatar" :alt="name">
    <span class="user-avatar--name">{{ name }}</span>
  </div>
</template>
<script lang="ts" setup>
defineProps<{
  avatar: string
  name: string
}>()
</script>
<style lang="scss">
.user-avatar {
  display: flex;
  align-items: center;
  gap: 10px;
  &--img {
    width: 34px;
    height: 34px;
    border-radius: 50%;
  }
  &--name {

  }
}
</style>